<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /*
        这一节主要介绍了flex布局的弹性伸缩比例
        父盒子设置了flex布局属性,代表父盒子是一个弹性容器,子盒子没有设置高度自动拉伸跟父盒子一样高,主要研究宽度
        下面的三个盒子第一个盒子设置了具体的宽度是100px,还有两个盒子按照比例进行自动拉伸
        主要看第二个第三个盒子的占据的宽度比例
    */

    .box {
        display: flex;

        width: 800px;
        height: 400px;
        background-color: pink;
        margin: 50px auto;
    }


    .box div:nth-child(1) {
        /* 设置了第一个盒子的宽度 */
        width: 100px;
        background-color: aqua;
    }

    .box div:nth-child(2) {
        /* 第二个盒子占剩下的一份 */
        flex: 1;
        background-color: greenyellow;
    }

    .box div:nth-child(3) {
        /* 第三个盒子占剩下的两份 */
        flex: 2;
        background-color: blueviolet;
    }


</style>

<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
</body>

</html>